// import React, { Component,Fragment,useState,useEffect} from 'react';
// // 引入 ECharts 主模块
// import echarts from 'echarts/lib/echarts';
// // 引入提示框和标题组件
// import 'echarts/lib/component/tooltip';
// import 'echarts/lib/component/title';
// import 'echarts/lib/component/visualMap';
// import { Button } from 'antd';

// var symbolSize = 6;
// var data = [[15, 0], [-50, 10], [-56.5, 20], [-46.5, 30], [-22.1, 40]];   // 这个 data 变量在这里单独声明，在后面也会用到

// export const DragCurvesEchartsShow = () => {

//   const [ _draggable, set_draggable] = useState(false);   // 是否可以拖拽

//   function toggleState() {  // 切换是否可拖拽的状态
//     set_draggable(!_draggable);
//   }

//   function initCharts() { 

//     var myChart = echarts.init(document.getElementById('drag'));
//     const option = {
//       tooltip: {
//           triggerOn: 'none',  // 表示不使用默认的『显示』『隐藏』触发规则。
//           formatter: function (params) {
//               return 'X: ' + params.data[0].toFixed(2) + '<br>Y: ' + params.data[1].toFixed(2);
//           }
//       },
//       grid: {
//       },
//       xAxis: {
//           min: -100,
//           max: 80,
//           type: 'value',
//           axisLine: {onZero: false}
//       },
//       yAxis: {
//           min: -30,
//           max: 60,
//           type: 'value',
//           axisLine: {onZero: false}
//       },
//       series: [
//           {
//               //id: 'a',
//               type: 'line',
//               smooth: true,
//               showSymbol: _draggable,   // 是否显示圆点，可拖拽时显示
//               symbolSize: symbolSize,   // 圆点大小
//               data: data
//           }
//       ]
//     };  

//     myChart.setOption(option);

//     setTimeout(function () {
//       // 使用 graphic 组件，在每个点上面，覆盖一个隐藏的可拖拽的圆点
//       myChart.setOption({
//           graphic: echarts.util.map(data, function (item, dataIndex) {   // 用 map 方法遍历 data 的每项，为每项生成一个圆点
//             return {
//               type: 'circle',  //首次设定图形元素时必须指定,设置形状：圆形
//               // 用 transform 的方式对圆点进行定位。position: [x, y] 表示将圆点平移到 [x, y] 位置。
//               // 这里使用了 convertToPixel 这个 API 来得到每个圆点的位置。
//               // convertToPixel(): 直角坐标 转 像素坐标；  convertFromPixel(): 像素坐标 转 直角坐标
//               position: myChart.convertToPixel('grid', item),
//               shape: {
//                   cx: 0,
//                   cy: 0,
//                   r: symbolSize / 2
//               },
//               invisible: true,   // 节点是否可见：可见 
//               draggable: _draggable,  // 是否可拖拽
//               // 使用echarts.util.curry 这个帮助方法:生成一个与 onPointDragging功能一样的新函数，且第一个参数永远为此时传入的 dataIndex 的值
//               ondrag: _draggable? echarts.util.curry(onPointDragging, dataIndex) : false,   // 此圆点的拖拽的响应事件，在拖拽过程中会不断被触发。
//               onmousemove: _draggable? echarts.util.curry(showTooltip, dataIndex) : false,
//               onmouseout: _draggable?echarts.util.curry(hideTooltip, dataIndex): false,
//               z: 100   // 把 z 值设得比较大，表示这个圆点在最上方，能覆盖住已有的折线图的圆点
//             }  
//           })
//       })
//     }, 0)


//     window.addEventListener('resize', updatePosition);

//     function updatePosition() {  // 对每个拖拽圆点重新计算位置，并用 setOption 更新。
//       myChart.setOption({
//           graphic: echarts.util.map(data, function (item, dataIndex) { 
//               return {
//                   position: myChart.convertToPixel('grid', item)
//               };
//           })
//       });
//     }

//     function showTooltip(dataIndex) {
//       myChart.dispatchAction({
//           type: 'showTip',
//           seriesIndex: 0,
//           dataIndex: dataIndex
//       });
//     }

//     function hideTooltip(dataIndex) {
//       myChart.dispatchAction({
//           type: 'hideTip'
//       });
//     }


//     // 拖拽某个圆点的过程中会不断调用此函数。
//     // 此函数中会根据拖拽后的新位置，改变 data 中的值，并用新的 data 值，重绘折线图，从而使折线图同步于被拖拽的隐藏圆点。
//     function onPointDragging(dataIndex, dx, dy) {
//       // data ：最初代码块中声明的 data，在这里会被更新；this：被拖拽的圆点。this.position 就是圆点当前的位置
//       data[dataIndex] = myChart.convertFromPixel('grid', this.position);  

//       // 用更新后的 data，重绘折线图。
//       myChart.setOption({
//           series: [{
//               //id: 'a',
//               data: data  
//           }]
//       });
//     };
//   };


//   useEffect(() => {    // 作用：componentDidMount,componentDidUpdate一起：第一次渲染 和 当图表切换的时候，重新执行
//     initCharts();
//   }); 
 
//   return (
//     <Fragment>
//       <Button onClick={toggleState}>绘制</Button>
//       <div id="drag" style={{height:'300px',width:'700px'}} > </div>
//     </Fragment>
//   )
// }
